<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Shadow parts example</title>
  <script src="main.js" defer></script>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Shadow part styling for tabbed custom element</h1>

  <template id="tabbed-custom-element">
    <style type="text/css">
      *, ::before, ::after {
        box-sizing: border-box;
        padding: 1rem;
      }
      :host {
        display: flex;
      }
    </style>
    <div part="tab active">Tab 1</div>
    <div part="tab">Tab 2</div>
    <div part="tab">Tab 3</div>
  </template>

  <tabbed-custom-element></tabbed-custom-element>

</body>
</html>
